<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>解决渐变文字和阴影冲突</title>
    <style>
      .shadow {
        text-align: center;
        font-size: 80px;
        font-weight: bold;
        color: #9aa83a;
        /* 被遮住 */
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
      }
      div::before {
        content: attr(text-shadow);
        position: absolute;
        z-index: 10;
        color: transparent;
        background: linear-gradient(180deg, #ffefb9 0%, #ffc06d 100%);
        background-clip: text;
        -webkit-background-clip: text;
        text-shadow: none;
      }
    </style>
  </head>
  <body>
    <h2>对一个元素同时使用文本阴影和文本渐变,阴影会覆盖渐变的颜色</h2>
    <p>解决方式参考代码</p>
    <div class="shadow" text-shadow="2024年诗酒文化大会">
      2024年诗酒文化大会
    </div>
  </body>
</html>
